<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<!-- 引入jquery -->
		<script src="js/jquery-1.11.1.min.js"></script>
	</head>
	<body>
		 <h1>jquery选择器</h1>
		 <p id="p1">1.基本选择器</p>
		 <p>2.层次选择器</p>
		 <p class="ok">1.过滤选择器</p>
		 <p class="ok">1.表单选择器</p>
		 
		 <ul>
			 <li>北京</li>
			 <li>上海</li>
			 <li id="gz">广州</li>
			 <li>深圳</li>
			 <li>天津</li>
		 </ul>
		 <div>
			 <p></p>
			 <p style="display: none;">张三，男</p>
			 <p>李四，男</p>
			 <p>铁锤，女</p>
			 <p>赵六，男</p>
		 </div>
		 <div id="d2">
			 <p>aaa</p>
			 <p class="nihao">bbb</p>
			 <p class="nihao">ccc</p>
			 <p class="hello">ddd</p>
		 </div>
		 <form>
			 <p>
				 1:<input type="text"/>
			 </p>
			 <p>
			 	 2:<input type="text" disabled/>
			 </p>
			 <p>
			 	 3:<input type="password" disabled/>
			 </p>
			 <p>
			 	 <input type="checkbox"/>篮球
				 <input type="checkbox" checked/>足球
				 <input type="checkbox"/>拍球
				 <input type="checkbox" checked/>台球
			 </p>
			 <p>
				 <select>
					 <option>北京</option>
					 <option selected>上海</option>
					 <option>广州</option>
				 </select>
			 </p>
		 </form>
	</body>
	<script>
		console.log("1.基本选择器")
		//元素选择器
		console.log($("p"))
		//类选择器
		console.log($(".ok"))
		//ID选择器
		console.log($("#p1"))
		//选择器组
		console.log($(".ok #p1"))
		
		console.log("2.层次选择器")
		//1.选子孙
		console.log($("ul li"))
		//2.选儿子
		console.log($("ul>li"))
		//3.下一个 弟弟
		console.log($("#gz+"))
		//4.所有弟弟
		console.log($("#gz~"))
		
		console.log("3.过滤选择器")
		console.log("3.1 基本过滤选择器")
		//获取第一个元素
		console.log($("ul li:first"));
		//获取偶数元素
		console.log($("ul li:even"));
		//获取对应下标元素
		console.log($("ul li:eq(1)"));
		//获取<某下标元素
		console.log($("ul li:lt(2)"));
		//获取某些元素以外的元素
		console.log($("ul li:not(#gz)"));
		
		console.log("3.2 内容过滤选择器")
		//1.通过内容过滤元素
		console.log($("div p:contains('男')"));
		console.log($("div p:empty"));
		
		console.log("3.3 可见过滤选择器")
		//选择可见元素
		console.log($("div p:visible"));
		//选择不可见元素
		console.log($("div p:hidden"));
		
		console.log("3.4 属性过滤选择器")
		//选择带有某属性的元素
		console.log($("#d2 p[class]"));
		//选择属性=值 的元素
		console.log($("#d2 p[class='nihao']"));
		
		console.log("3.5 状态过滤选择器")
		//可用 ， 不可用状态
		console.log($("form input:disabled"))
		//被选中的下拉选 单选 多选框
		console.log($("form input:checked"))
		console.log($("option:selected"))
		
		console.log("4 表单选择器")
		console.log($("form input:text"))
	</script>
</html>